<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>

  </head>
  <body>
    <button id="btn1">点击发送 GET 请求</button>
    <button id="btn2">点击发送 GET 请求(async 和 await)</button>
    <button id="btn3">点击发送 POST 请求</button>
    <button id="btn4">点击发送 PUT 请求</button>
    <button id="btn5">点击发送 DELETE 请求</button>
    <!-- 引入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>
      
        let btn1=document.querySelector('#btn1');
        let btn2=document.querySelector('#btn2');
        let btn3=document.querySelector('#btn3');
        let btn4=document.querySelector('#btn4');
        let btn5=document.querySelector('#btn5');
    //第一遍
    //  //使用axios(本质是函数)发送请求,通过绑定点击事件的方式
    //  btn1.onclick=function (){
    //   axios({
    //     url:'http://localhost:3000/movie',
    //     method:'GET', //默认值就是get
    //   }).then(
    //     response =>{//请求成功的回调，返回值是响应体的数据
    //       console.log(response);
    //       alert(JSON.stringify(response.data))
    //     },error=>{//请求失败的回调
    //       console.log(error);
    //       alert(error.message)
    //     }
    //   );
    //  }

       /* 
      - axios(config)  config为配置对象 => 对象内的属性/方法是固定的一些
        url  请求地址   可以包含param和query参数
        method 请求方式
        data  请求体参数
          值为对象: json格式
          a=1&b=2: query字符串格式
        params: query参数    不是用来指定param参数
      - 返回值是promise对象
          如果成功了, value是response对象
            data: 响应体数据(已经解析好了)
            status: 响应状态码
          如果失败了, reason是error对象
            message: 错误信息
      */
     //第二遍
    btn1.onclick= ()=>{
      //axios是一个函数，()是函数调用，里面的参数是config配置对象，对象里面是很多参数，分别是url,method,data(json数据)
      axios({
        // url:'http://localhost:3000/movie?id=1', //一般不会把query参数直接写在url上
        url:'http://localhost:3000/movie',
        params:{ //这里的params是指定query参数，而不是param参数
          id:1
        },
        method:'GET' //默认是get请求
      }).then(response=>{//请求成功的回调
        console.log(response);
        alert(JSON.stringify(response.data))
      },error=>{//请求失败的回调
        alert(error.message)
      })
    }

    //用async 和 await发送请求
    btn2.onclick= async ()=>{
      try{
        const response = await axios('http://localhost:3000/movie')
        console.log(response);
        alert(JSON.stringify(response.data))
      }catch(e){
        console.log(e);
        alert(e.message)
      }
    }

    //用post方式，async 和 await发送请求
    btn3.onclick= async ()=>{
      //发送post请求
      try{
        const response = await axios({
          url:'http://localhost:3000/movie',
          method:'POST',
          // data:{//此种方式是json格式请求体
          //   name:'三毛',
          //   director:'老金'
          // }
          data:'name=某某电影&director=某某导演'
        })
        // console.log(response);
        // alert(JSON.stringify(response.data))
        alert('post请求提交成功')
      }catch(e){
        console.log(e);
        alert(e.message)
      }
    }

    btn4.onclick= async ()=>{
      //发送post请求
      try{
        const response = await axios({
          url:'http://localhost:3000/movie/7',//指定为param参数方式
          method:'put',  //添加操作
          data:{ // json格式请求体
            name:'三毛毛',
            director:'老金金'
          }
        })
        console.log(response);
        alert(JSON.stringify(response.data))
      }catch(e){
        console.log(e);
        alert(e.message)
      }
    }

    //发送delete请求，就是删除请求
    btn5.onclick= async ()=>{
      //发送post请求
      try{
        const response = await axios({
          url:'http://localhost:3000/movie/5', 
          method:'delete', //可以大小或者小写
        })
        // console.log(response);
        // alert(JSON.stringify(response.data))
        alert('删除成功')
      }catch(e){
        console.log(e);
        alert(e.message)
      }
    }
    </script>
  </body>
</html>
